<template>
  <div class="sideBar">
    <ul class="sideBar__tags">
      <li class="sideBar__tags__tag" @click="toOverview">
        <span class="iconfont">&#xe600;</span
        ><span class="sideBar__tags__tag__text">更新概览</span>
      </li>
      <li class="sideBar__tags__tag" @click="toDetail">
        <span class="iconfont">&#xe601;</span
        ><span class="sideBar__tags__tag__text">车型详情</span>
      </li>
      <li class="sideBar__tags__tag">
        <span class="iconfont">&#xead8;</span
        ><span class="sideBar__tags__tag__text">数据对比</span>
      </li>
      <li class="sideBar__tags__tag">
        <span class="iconfont">&#xe602;</span
        ><span class="sideBar__tags__tag__text">下载收藏</span>
      </li>
    </ul>
  </div>
</template>
<script>
import { useRouter } from "vue-router";

//导航栏逻辑
const useSidebarEffects = () => {
  const router = useRouter();
  //更新概览跳转
  const toOverview = () => {
    router.push("/index/overview");
  };
  //车型列表跳转
  const toDetail = () => {
    router.push("/index/CarList");
  };
  return{toOverview,toDetail}
};

export default {
  setup() {
    const {toOverview,toDetail}=useSidebarEffects()
    return { toOverview,toDetail};
  },
};
</script>
<style lang="scss" scoped>
.sideBar {
  height: 91vh;
  min-height: 70px;
  margin-top: 0.5vh;
  background-color: white;
  width: 25rem;
  border: 1px solid rgba(255, 255, 255, 100);
  &__tags {
    padding-top: 1rem;
    list-style-type: none;
    &__tag {
      line-height: 4rem;
      height: 4rem;
      width: 16rem;
      margin: 0 auto;
      margin-top: 1rem;
      cursor: pointer ;
      .iconfont {
        cursor: pointer ;
        font-size: 2.4rem;
      }
      &__text {
        margin-left: 1.5rem;
        position: relative;
        top: -0.2rem;
        font-size: 1.6rem;
        font-weight: bold;
        cursor: pointer ;
      }
    }
  }
}
</style>